<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edeg">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes example {
            from {
                transform: rotateX(0deg) rotateY(0deg);
            }
            to {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .ul {
            width: 200px;
            height: 200px;
            list-style: none;
            position: relative;
            animation-name: example;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            /* 支持3D效果 */
            transform-style: preserve-3d;
        }

        .ul>li {
            width: 200px;
            height: 200px;
            font-size: 40px;
            color: white;
            position: absolute;
            opacity: 0.3;
            text-align: center;
            line-height: 200px;
        }

        .ul>li:nth-child(1) {
            background-color: tomato;
            transform: translateZ(100px);
        }

        .ul>li:nth-child(2) {
            background-color: palevioletred;
            transform: translateZ(-100px);
        }

        .ul>li:nth-child(3) {
            background-color: aquamarine;
            transform: rotateY(-90deg) translateZ(100px);
        }

        .ul>li:nth-child(4) {
            background-color: yellowgreen;
            transform: rotateY(90deg) translateZ(100px);
        }

        .ul>li:nth-child(5) {
            background-color: blueviolet;
            transform: rotateX(90deg) translateZ(100px);
        }

        .ul>li:nth-child(6) {
            background-color: darkblue;
            transform: rotateX(-90deg) translateZ(100px);
        }


    </style>
</head>
<body>
    <ul class="ul">
        <li>front</li>
        <li>back</li>
        <li>left</li>
        <li>right</li>
        <li>top</li>
        <li>bottom</li>
    </ul>
</body>
</html>